import React, { useState, useEffect } from 'react';
import axios from 'axios';
import tx from './6.jpg';
import { useNavigate } from 'react-router-dom';
import { NavBar } from 'antd-mobile';
import style from '../lyf/Detail.module.css'


export default function QJDetail() {
    const id = localStorage.getItem('qingjia');
    console.log(id)
    const [QJ, setQJ] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const navigate = useNavigate()
    

    useEffect(() => {
        if (!id) {
            setError('未找到请假ID');
            setLoading(false);
            return;
        }

        const fetchData = async () => {
            try {
                const res = await axios.post('http://localhost:3111/qingjia/QJlist', { id });
                setQJ(res.data.data);
            } catch (err) {
                setError(err.message || '获取数据失败');
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [id]);

    if (loading) return <div>加载中...</div>;
    if (error) return <div>错误: {error}</div>;

    // 筛选zhiye为"员工"的数据
    const filteredQJ = QJ.filter(item => item.zhiye === "员工");

    if (filteredQJ.length === 0) return <div>未找到员工的数据</div>;

    const back = () => {
        navigate("/daiban")
    }

    return (
        <div>
            <NavBar onBack={back}>请假详情</NavBar>
            <p style={{ fontSize: '15px', marginLeft: '10px', color: 'rgb(61,158,109)' }}>申报人信息</p>
            <div className={style.xinxi}>
                {QJ.filter(i => i._id == id).map(item => (
                    <div style={{ display: 'flex' }} key={item._id}>
                        <img src={tx} className={style.toux} />
                        <p style={{ fontSize: '25px', marginTop: '50px', marginLeft: '10px' }}>{item.username}</p>
                    </div>
                ))}
                {QJ.filter(i => i._id == id).map(item => (
                    <div style={{ marginLeft: '20px' }} key={item._id}>
                        <p className={style.jingli}> {item.zhiye} <br />Managere</p>
                        <p style={{ fontSize: '18px', marginTop: '15px', marginLeft: '10px' }}>所属部门：{item.bumen}</p>
                    </div>
                ))}
            </div>
            <p style={{ fontSize: '15px', marginLeft: '10px', color: 'rgb(61,158,109)', marginTop: '20px' }}>请假详情</p>
            <hr style={{ marginTop: '10px' }} />
            <p style={{ fontSize: '16px', marginLeft: '20px', color: 'rgb(180,180,180)', marginTop: '10px' }}>申请时间：2025-5-10</p>

            {QJ.filter(i => i._id == id).map(item => (
                <div key={item._id} style={{ margin: "10px 50px", lineHeight: "30px" }}>
                    <p>标题: {item.title}</p>
                    <p>职位: {item.zhiye}</p>
                    <p>部门：{item.bumen}</p>
                    <p>申请人: {item.username}</p>
                    <p>开始日期: {item.KStime}</p>
                    <p>结束日期: {item.JStime}</p>
                    <p>请假类型：{item.QJtype}</p>
                    <p>请假方式：{item.QJfangshi}</p>
                    <p>请假原因：{item.yuanyin}</p>
                    当前状态：<button style={{ color: item.zhuangtai == 2 ? "#4CA5FF" : "#FF5353", border: item.zhuangtai == 2 ? '1px solid #4CA5FF' : '1px solid #FF5353' }}>{item.zhuangtai == 2 ? "待审批" : (item.zhuangtai == 1 ? "未读" : "")}</button>
                </div>
            ))}

            <div style={{ margin: "50px" }}>
                <div style={{ display: "flex" }}>
                    <img src={tx} style={{ width: "40px", height: "40px", borderRadius: "50%" }} />
                    <div style={{ marginLeft: "20px", lineHeight: "30px" }}>
                        <p><span style={{ color: "#3366CC", fontSize: "15px", fontWeight: "800" }}>同意</span></p>
                        <p style={{ fontSize: "12px" }}>直接上级审批 吴良玉 时间</p>
                    </div>
                </div>
                <div style={{ height: "40px", width: "3px", backgroundColor: "#1E9FF2", marginLeft: "17px" }}></div>
                <div style={{ display: "flex" }}>
                    <img src={tx} style={{ width: "40px", height: "40px", borderRadius: "50%" }} />
                    <div style={{ marginLeft: "20px", lineHeight: "30px" }}>
                        <p><span style={{ color: "#3366CC", fontSize: "15px", fontWeight: "800" }}>等待审批</span></p>
                        <p style={{ fontSize: "12px" }}>等待行政专员审批流程</p>
                    </div>
                </div>
                <div style={{ height: "40px", width: "3px", backgroundColor: "#1E9FF2", marginLeft: "17px" }}></div>
                <div style={{ display: "flex" }}>
                    <div style={{ width: "40px", height: "40px", backgroundColor: "#1E9FF2", borderRadius: "50%", textAlign: "center", lineHeight: "40px", fontSize: "20px", color: "white" }}>?</div>
                    <div style={{ marginLeft: "20px", lineHeight: "30px" }}>
                        <p style={{ fontSize: "12px", color: "#ccc" }}>审批中</p>
                    </div>
                </div>
            </div>
        </div>
    );
}